<template>
  <div class="body">
    <el-row
      v-if="$route.query.id"
      style="height: 25px; border-bottom: 1px solid #ccc; margin-bottom: 15px"
    >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <div class="up">
      <el-form
        :inline="true"
        :model="numberValidateForm"
        ref="numberValidateForm"
        class="demo-form-inline"
      >
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="numberValidateForm.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="numberValidateForm.state">
            <el-option label="启用" value="0"></el-option>
            <el-option label="禁用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm('numberValidateForm')">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div>
        <span
          v-if="$route.query.id"
          @click="$router.push('/subjects/list')"
          class="blue"
          style="font-size: 14px; margin-right: 10px; cursor: pointer"
          ><i class="el-icon-back"></i>返回学科</span
        >
        <el-button type="success" @click="addtags" class="add"
          ><i class="el-icon-edit"></i>新增用户</el-button
        >
      </div>
    </div>
    <div class="alert">
      <i class="el-icon-info"></i>一共 {{ tableData.counts }}共条记录
    </div>
    <!-- 表格内容 因为涉及到了分页，把所有的请求回来的数据放在对象里面，看有没有这个对象然后再对象里面的数组进行渲染-->
    <el-table
      :data="tableData?.items"
      highlight-current-row
      style="width: 100%"
      :header-cell-style="{
        background: '#fafafa',
        color: '#909399',
        borderBottom: '2px #ccc solid',
      }"
    >
      <el-table-column type="index" label="序号" />
      <el-table-column prop="subjectName" label="所属学科" width="150px" />
      <el-table-column prop="tagName" label="标签名称" />
      <el-table-column prop="username" label="创建者" />
      <el-table-column prop="addDate" label="创建日期">
        <template slot-scope="scope">
          <span>{{ disponseTime(scope.row.addDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state === 1 ? "已禁用" : "已启用" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <span class="blue" @click="clickFn(scope.row)">
            {{ scope.row.state === 1 ? "启用" : "禁用" }} </span
          >&nbsp;
          <span
            @click="edit(scope.row)"
            :class="scope.row.state === 1 ? 'ccc' : 'blue'"
            >修改</span
          >&nbsp;
          <span
            @click="del(scope.row)"
            :class="scope.row.state === 1 ? 'ccc' : 'blue'"
            >删除</span
          >
        </template>
      </el-table-column>
    </el-table>
    <tagsAdd
      ref="tags"
      :subjectName="subjectName"
      @submit="addsubmit"
    ></tagsAdd>
    <pagetool
      :total="tableData.counts"
      :paginationPage="xlist.page"
      :paginationPagesize="xlist.pagesize"
      @pageChange="pageChangeFn"
      @pageSizeChange="pageSizeChangeFn"
    ></pagetool>
  </div>
</template>

<script>
import pagetool from '../../module-hmmm/components/page-tool.vue'
import tagsAdd from '../../module-hmmm/components/tags-add.vue'
import { list, add, update, remove, changeState } from '../../api/hmmm/tags'
import { simple } from '../../api/hmmm/subjects'
export default {
  components: {
    tagsAdd,
    pagetool
  },
  data () {
    return {
      tableData: {},
      numberValidateForm: {
        tagName: '',
        state: ''
      },
      // 列表的相关页数问题
      xlist: {
        page: 1,
        pagesize: 10
      },
      totalpage: '',
      // 拿回来的列表数组渲染
      item: [],
      subjectName: [] // 选择的表单里面
    }
  },
  async created () {
    this.list()
    const res = await simple()
    console.log(res)
    this.subjectName = res.data

    // console.log(this.subjectName)
  },
  methods: {
    // 处理格式
    disponseTime (str) {
      return str?.replace(/T/, ' ').replace(/.000Z/, '')
    },
    // 点击添加提交
    async addsubmit (val) {
      try {
        if (this.$refs.tags.Form.id) {
          await update(val)
          this.$message.success('编辑成功了')
        } else {
          await add(val)
          this.$message.success('添加成功了')
        }
      } finally {
        this.$refs.tags.beforeClose()
        this.list()
      }
    },
    // 点击取反
    async clickFn (val) {
      await changeState({
        // 如果禁用的话就只给他取反
        state: val.state === 1 ? 0 : 1,
        id: val.id
      })
      this.$message.success('操作成功了')
      this.list()
    },
    // 渲染列表
    async list () {
      if (this.$route.query) { this.xlist.subjectID = this.$route.query.id }
      const { data } = await list(this.xlist)
      // console.log(data)
      this.tableData = data
    },
    // addtags打开弹框
    async addtags () {
      this.$refs.tags.dialogVisible = true
    },

    // 编辑修改弹框
    edit (val) {
      this.$refs.tags.dialogVisible = true
      console.log(val)
      this.$refs.tags.Form = {
        tagName: val.tagName,
        subjectID: val.subjectID
      }
      this.$refs.tags.Form.id = val.id
    },
    // 删除
    async del (val) {
      await this.$confirm('确定删除嘛')
      await remove(val)
      this.list()
    },

    pageChangeFn (page) {
      this.xlist.page = page
      this.list()
    },
    pageSizeChangeFn (size) {
      this.xlist.pagesize = size
      this.list()
    },
    // 查询
    async onSubmit () {
      // console.log('submit!')
      const { data } = await list({
        ...this.numberValidateForm,
        ...this.xlist
      })
      this.tableData = data
      console.log(this.tableData)
      // this.list()
      this.$message.success('查询成功了')
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.xlist.state = null
      this.xlist.tagName = null
      console.log(this.xlist)
    }
  }
}
</script>

<style scoped lang="less">
.body {
  box-sizing: border-box;
  padding: 20px;
  max-width: 100%;
  margin: 10px 20px;
  background-color: #fff;
  color: #303133;
  .alert {
    height: 35px;
    width: 100%;
    padding-left: 16px;
    margin: 15px 0;
    border-radius: 3px;
    background-color: #f4f4f4;
    line-height: 35px;
    color: #909399;
    font-size: 13px;
  }
}
.up {
  display: flex;
  justify-content: space-between;
}
</style>
